<template>
<div>
    <div class="biaoti2">电影院管理员-利润统计</div>
    <div class="biaoti">总利润：{{mprofit}}</div>
  </div>
  <div class="changping" id="main1" :style="{ width: '1500px', height: '550px' }"></div> 
</template>

<script setup>
 
import * as echarts from 'echarts'
import {onMounted, ref, reactive} from "vue";
import { get, post } from "@/common";
import { useRouter, useRoute } from "vue-router";
const mprofit = ref(0);
onMounted(() => {// 需要获取到element,所以是onMounted的Hook
const router = useRouter();
const route = useRoute();

const movieList = ref([]);
const movieprofit = ref({});

let mov_num = 0;
let cnm_id = 0;




const getMovieProfitList = () => {
  get("/search/profit/c_profitmovie",{mov_num: mov_num,cnm_id: cnm_id}).then(res => {
    movieprofit.value = res.data;
    console.log("ss"+cnm_id);
    console.log(movieprofit);
    let mldata = new Array() ;
    

    for(var i=0;i<movieList.value.length;i++){
        mldata.push(movieList.value[i]);
    }

    let mdatay = [];

    for (let i = 0; i < movieList.value.length; i++) {
          mdatay.push(movieList.value[i]);
        }

    let mdatas=[];

    for (let i = 0; i < movieprofit.value.length; i++) {
          var item = {
            value: movieprofit.value[i],
            name: movieList.value[i],
          };
          mdatas.push(item);
        }
        console.log(mdatas);

    

    // 绘制图表
       myChart.setOption({
          title : {
              text: '各个电影收益',//主标题
              subtext: '',//副标题
          },
          tooltip : {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
              orient: 'vertical',
              bottom: 'bottom',
              data: mdatay,
          },
          series : [
              {
                  name: '收益',
                  type: 'pie',
                  radius : '55%',
                  data: mdatas,
                  itemStyle: {
                      emphasis: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                  }
              }
          ]
      });
      window.onresize = function () { // 自适应大小
        myChart.resize();
      };
      getmProfit();
      console.log(mprofit);
  });
  
};

const getCinemaId = () =>{
  get("/search/profit/getcnm_id").then(res => {
    cnm_id = res.data;
    console.log(cnm_id);
    getMovieProfitList();
  })
}

const getMovieList = () => {
  get("/info/movie/movie-list-name").then(res => {
    movieList.value = res.data;
    mov_num = movieList.value.length;
    getCinemaId();
    
  });
};


const getmProfit = () => {
  for (let i = 0; i < movieprofit.value.length; i++) {
    mprofit.value=mprofit.value+movieprofit.value[i];
  }
};

    
let myChart = echarts.init(document.getElementById("main1"));
      
getMovieList();

    });


</script>

<style>
@import'../../css/cinema.css';
@import'../../css/style-starter.css';
@import'../../css/base.css';
@import'../../css/bootstrap-grid.css';
.dafen{
  float: left;
  margin-top:36px;
  height:65px;
  border-style: solid;
  border-width: 0px 0px 0px 4px;
  border-color: #1890ff;
  padding: 4px;
}
.biaoti{
  font-size: 22px;
  color: rgba(0, 0, 0, 0.80);
  margin-left: 50px;
  margin-bottom: 15px;
  width: 25%;
  border-style: solid;
  border-width: 0px 0px 0px 4px;
  border-color: rgba(24, 144, 255, 0.497);
}
.biaoti2{
  font-size: 30px;
  color: rgba(0, 0, 0, 0.80);
  margin-left: 30px;
  margin-bottom: 15px;
  width: 25%;
  border-style: solid;
  border-width: 0px 0px 0px 4px;
  border-color: rgba(24, 144, 255, 0.497);
}
.duanping{
  border-style: solid;
  border-width: 1px 4px 4px 0px;
  border-color: #fff;
  width: 300px;
  height:150px;
  display: inline-block;
  background-color: rgba(105, 105, 105, 0.057);
  padding: 10px;
}
.changping{
  border-style: solid;
  border-width: 2px 4px 4px 2px;
  border-color: #fff;
  height:auto;
  background-color: rgba(105, 105, 105, 0.03);
  margin: auto;
  border: 4px solid rgba(105, 105, 105, 0.03);
}
.ant-btn-primary {
    color: #fff;
    background-color: #1890ff;
    border-color: #1890ff;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.12);
    -webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.045);
    box-shadow: 0 2px 0 rgba(0,0,0,0.045);
    
}
.ant-btn-red {
    color: #fff;
    background-color: #1890ff;
    border-color: #1890ff;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.12);
    -webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.045);
    box-shadow: 0 2px 0 rgba(0,0,0,0.045);
}
</style>